<template>
  <view class="company-item" @click="toPage">
    <!-- 企业 -->
    <view class="company">
      <view class="company-wrap">
        <view class="company-title">{{ item.name }}</view>
      </view>
      <view class="company-follow">主账号：{{ item.status == 0 ? '是' : item.status == 1 ? '否' : '' }}</view>
      <!-- <view class="company-status"></view>     -->
    </view>
    <!-- 客户类型 -->
    <view :class="['customer-type', isActive ? 'active' : '']">
      <view class="type-wrap">
        <view class="type-item">
          <view class="type-label">性别</view>
          <view class="type-value">{{item.sex == 0 ? '男' : '女'}}</view>
        </view>
        <view class="type-item">
          <view class="type-label">手机号码</view>
          <view class="type-value">{{ item.phone }}</view>
        </view>
      </view>
      <!-- 创建时间 -->
      <view class="customer-type-time">创建时间 {{item.createTime}}</view>
    </view>
  </view>
</template>
<script>
import { getCustomerType } from "@/config/storage";
export default {
  name: "company-item",
  props: {
    isActive: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    // 跳转详情页面
    toPage() {
      this.$emit("jump");
    },
  },
};
</script>
<style lang="scss" scoped>
.company-item {
  padding: 0 18rpx;
}
.company {
  display: flex;
  justify-content: space-between;
  padding: 30rpx 26rpx 10rpx 26rpx;
  .company-title {
    font-weight: 500;
    font-size: 32rpx;
    color: #171a1d;
    line-height: 45rpx;
    margin-bottom: 10rpx;
  }
  .company-follow {
    font-size: 24rpx;
    color: #838589;
    line-height: 33rpx;
  }
  .company-status {
    background: #e3e3ef;
    font-weight: 400;
    font-size: 24rpx;
    color: #015ad4;
    line-height: 33rpx;
    min-width: 96rpx;
    width: 112rpx;
    height: 36rpx;
    text-align: center;
  }
}
.customer-type {
  height: 187rpx;
  background: rgba(220, 38, 38, 0.05);
  border-radius: 16rpx;
  border: 1rpx solid rgba(220, 38, 38, 0.2);
  padding: 20rpx 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .type-wrap {
    display: flex;
    justify-content: space-between;
    border-bottom: 1rpx solid rgba(220, 38, 38, 0.2);
    padding-bottom: 16rpx;
  }
  .type-item {
    width: 50%;
    .type-label {
      font-size: 24rpx;
      color: #838589;
      line-height: 33rpx;
      margin-bottom: 8rpx;
    }
    .type-value {
      font-size: 28rpx;
      color: #171a1d;
      line-height: 40rpx;
    }
  }
  .customer-type-time {
    font-size: 24rpx;
    color: #838589;
    line-height: 33rpx;
  }
  &.active {
    background: #f4f6fa;
    border: 1rpx solid #f4f6fa;
    .type-wrap {
      border-bottom: 1rpx solid #e9ebec;
    }
  }
}
</style>
